<template>
	<view class="page">

		<View id="fixed-dom">
			<u-navbar back-icon-color="#fff" :back-text-style="{color:'#fff'}" :border-bottom="false" :is-back="true"
				back-text="设备信息" :background="{ background:'#357BED'}"></u-navbar>
			<u-tabs :list="tabList" :is-scroll="false" bg-color="#357BED" active-color="#fff" bar-width="100"
				:bar-style="{bottom: '-4rpx'}" inactive-color="rgba(255,255,255,0.5)" bar-height="4" :bold="false"
				:current="current" @change="change"></u-tabs>
			<!-- <view v-if="current == 0" class="card">
				<view class="title">
					设备监控数据
				</view>
				<view class="row u-flex u-row-between">
					<view v-for="item in 5" :key="item" class="item u-flex u-row-center">
						<text>报警</text>
						<text>0</text>
					</view>
				</view>
			</view> -->
			<view class="dropdown">
				<u-dropdown v-if="current == 1" ref="uDropdown" close-on-click-mask border-bottom>
					<u-dropdown-item @change="changeItem($event,'1')" v-model="value1" :title="val1  ? val1 : '防雷类型'"
						:options="options1"></u-dropdown-item>
					<u-dropdown-item @change="changeItem($event,'2')" v-model="value2" :title="val2  ? val2 : '设备状态'"
						:options="options2"></u-dropdown-item>
					<u-dropdown-item @change="changeItem($event,'3')" v-model="value3" :title="val3  ? val3 : '单位区域'"
						:options="options3"></u-dropdown-item>
				</u-dropdown>
				<u-dropdown v-else ref="uDropdown" close-on-click-mask border-bottom>
					<u-dropdown-item @change="changeItem($event,'4')" v-model="value4" :title="val4  ? val4 : '雷电类型'"
						:options="options4"></u-dropdown-item>
					<u-dropdown-item @change="changeItem($event,'2')" v-model="value2" :title="val2  ? val2 : '设备状态'"
						:options="options2"></u-dropdown-item>
					<u-dropdown-item @change="changeItem($event,'3')" v-model="value3" :title="val3  ? val3 : '单位区域'"
						:options="options3"></u-dropdown-item>
				</u-dropdown>
			</view>
		</View>


		<scroll-view v-if="total > 0" :style="{height: height + 'px' }" :upper-threshold="100"
			@scrolltoupper="scrolltoupper" scroll-y="true" @scrolltolower="scrolltolower" :lower-threshold="300">
			<view class="list">
				<view v-for="(item,index) in list" :key="index" class="item">
					<view class="body">
						<view class="header u-flex u-row-between">
							<view class="title u-flex">
								<image v-if="devicesList[item.DeviceType]"
									style="width: 40rpx; height: 40rpx; margin-right: 15rpx;"
									:src="require(`../../static/img/${devicesList[item.DeviceType].icon}.png`)" />
								</image>
								<text>{{devicesList[item.DeviceType].title}}</text>
							</view>
							<view class="status u-flex u-row-center">
								<text>{{item.Status == 1 ? '正常' : '离线'}}</text>
								<u-icon style="margin-left:10rpx" name="arrow-right" color="#9e9e9e" size="28" />
							</view>

						</view>
						<view class="infor">
							<view class="infor-2">
								<text>设备编号：</text>
								<text>{{item.DeviceCode}}</text>
							</view>
							<view class="infor-2">
								<text>设备位置：</text>
								<text>{{item.Location}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
					margin-bottom="30" />
			</view>
		</scroll-view>
		<u-empty margin-top="160" :show="total == 0" text="暂无数据" mode="list"></u-empty>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				height: 0,
				total: -1,
				tabList: [{
					name: '雷电'
				}, {
					name: '防雷',
				}],
				list: [],
				current: 0,
				value1: '',
				val1: '',
				value2: '',
				val2: '',
				value3: '',
				val3: '',
				val4: '',
				value4: '',
				options1: [{
						label: '防雷监测',
						value: 1,
					},
					{
						label: '接地电阻',
						value: 2,
					},
					{
						label: '峰值记录仪',
						value: 3,
					}

				],
				options4: [{
						label: '雷电预警',
						value: 1,
					},

				],
				options2: [{
						label: '在线',
						value: 1,
					},
					{
						label: '离线',
						value: 2,
					},
					{
						label: '报警',
						value: 3,
					},
				],
				options3: [],
				userInfo: {},
				pageIndex: 1,
				pageSize: 10,
				status: 'loadmore',
				devicesList: {
					'1': {
						title: '防雷监测',
						icon: 'devices-icon6',
					},
					'2': {
						title: '接地电阻',
						icon: 'devices-icon5',
					},
					'3': {
						title: '峰值记录仪',
						icon: 'devices-icon7'
					},
					'4': {
						title: '雷电预警',
						icon: 'devices-icon6'
					}
				}
			}
		},
		mounted() {
			this.setScorllViewHeight();
		},
		methods: {
			onPullDownRefresh() {
				this.pageIndex = 1;
				this.list = [];
				this.getList()
			},
			setScorllViewHeight() {
				const query = uni.createSelectorQuery().in(this);
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						query.select('#fixed-dom').boundingClientRect(data => {
							_this.height = res.windowHeight - data.height
						}).exec();
					}
				})
			},
			change(index) {
				this.current = index;
				this.pageIndex = 1;
				this.list = [];
				if (this.current == 0) {
					this.val4 = '雷电预警';
					this.value4 = 1;
				} else {
					this.val1 = '防雷监测';
					this.value1 = 1;
					this.val4 = '';
					this.value4 = '';
				}
				this.getList();
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.setScorllViewHeight();
				})
			},
			scrolltolower() {
				if (this.status == 'loading' || this.status == 'nomore') {
					return;
				}
				this.getList()
			},
			changeItem(index, optionsIndex) {
				this['value' + optionsIndex] = index;
				this['options' + optionsIndex].map((item) => {
					if (item.value === index) {
						this['val' + optionsIndex] = item.label;
					}
				})
				this.pageIndex = 1;
				this.list = [];
				this.getList();
			},
			async getList() {
				this.$axios.post('Device/Xquery', {
					...this.userInfo,
					tableIndex: 'spd',
					pageSize: this.pageSize,
					pageIndex: this.pageIndex,
					Status: this.value2,
					DeviceType: this.val4 == '雷电预警' ? 4 : this.value1,
					RegionId: this.value3,
				}, p => {
					if (this.current == 0) {
						this.val4 = '雷电预警';
						this.value4 = 1;
					} else {
						this.val4 = '';
						this.value4 = '';
					}
					if (p.code == 0) {
						this.total = p.count
						this.list = this.list.concat(p.data);
						if (this.list.length >= p.count) {
							this.status = "nomore"
						} else {
							this.pageIndex += 1;
							this.status = "loadmore"
						}

					} else {
						this.total = 0
						this.pageIndex = 1
						this.list = []
					}

					uni.stopPullDownRefresh();
				})
			},
			getRegion() {
				this.$axios.post('Region/XGetRegion', {
					...this.userInfo
				}, p => {
					p.data.map(item => {
						this.options3.push({
							label: item.RegionTitle,
							value: item.ID
						})
					})
				})
			}
		},
		onLoad() {
			this.userInfo = this.$util.getUserInfo()
			this.getRegion();
			this.getList();
		},
	}
</script>

<style scoped lang="scss">
	page {}

	.page {
		background: rgb(244, 244, 244);
	}

	.fixed {
		position: fixed;
		left: 0;
		z-index: 99;
		width: 100%;
		flex: 1;
		top: 0rpx;
	}


	.card {
		margin: 0rpx 30rpx 8rpx;
		padding: 30rpx 0;
		border-radius: 20rpx;
		background-color: #fff;

		.title {
			font-size: 30rpx;
			padding: 0 30rpx 38rpx;
			color: #2e86ff;
		}

		.item {
			flex-direction: column;
			flex: 1;
			position: relative;
			font-size: 29rpx;
			color: #080808;

			text:nth-of-type(1) {
				margin-bottom: 15rpx;
			}
		}

		.item::after {
			height: 66rpx;
			width: 2rpx;
			background: #E4E7ED;
			display: block;
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}

		.item:nth-last-of-type(1)::after {
			background: #fff;
		}
	}

	.dropdown {
		background: #fff;
	}

	.list {
		padding: 5rpx 0;

		.item {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 14rpx;

			.body {
				color: #383838;
				flex: 1;

				.header {
					padding-bottom: 35rpx;
					font-size: 29rpx;
					border-bottom: 1rpx solid #E4E7ED;

					.title {
						font-weight: bold;
					}
				}

				.infor {
					font-size: 28rpx;
					flex: 1;

					.infor-2 {
						font-size: 28rpx;
						color: #9e9e9e;
						padding-left: 40rpx;
						padding-top: 20rpx;

						text:nth-last-of-type(1) {
							color: #000;
						}
					}
				}
			}

		}
	}
</style>
